<!--单选按钮组-->
<template>
  <a-form-item :label="label">
    <a-radio-group v-decorator="vDecorator" :disabled="cdisabled" @change="change" :style="getStyle">
      <a-radio
          v-for="(record,index) in dataSoure"
          :value="record[valueField]"
          :key="index"
      >{{ record[textField] }}
      </a-radio>
      <slot></slot>
    </a-radio-group>
  </a-form-item>
</template>

<script>
import './css/form.less'
import { mixin } from './js/form.js'

export default {
  name: 'AntFormRadioGroup',
  mixins: [mixin],
  props: {
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 是否由form表单自动布局
     */
    autoLayoutByForm: {
      type: Boolean,
      default: true
    },
    /**
     * 显示文本
     */
    label: {
      type: String,
      default: ''
    },
    /**
     * 选择数据源，接口url或数组
     */
    selectData: {
      type: [Array, String],
      default: () => []
    },
    /**
     * 绑定字段 ['phone' ,{ rules: [{ required: true},{validator:function(rule, value, callback)] }],自定义验证方法时callback回调函数必须在方法中调用，
     * 失败返回错误提示callback("xxx")，成功返回callback()
     */
    vDecorator: {
      type: Array,
      default: () => []
    },
    /**
     * 为值的字段
     */
    valueField: {
      type: String,
      default: 'value'
    },
    /**
     * 为显示名称的字段
     */
    textField: {
      type: String,
      default: 'text'
    },
    /**
     * css样式，优先级最高
     */
    cstyle: {
      type: String,
      default: ''
    },
    /**
     * 非自动布局的宽度，优先级最低
     */
    defaultWidth: {
      type: Number,
      default: 240
    }
  },
  data() {
    return {
      //是否禁用和输入提示，由AntForm组件调用
      cdisabled: false,
      cplaceholder: '请输入' + this.label,
      dataSoure: []
    }
  },
  computed: {
    /**
     * 获取样式
     */
    getStyle() {
      return { width: (this.percentageLayoutWidth ? this.percentageLayoutWidth : this.defaultWidth) + 'px', ...this.cstyle }
    }
  },
  created() {
  },
  mounted() {
    this.loadData(this.selectData)
    // 自动添加验证为空时的message
    let vDecorator = this.vDecorator
    if (vDecorator.length > 1 && vDecorator[1].rules) {
      let rules = vDecorator[1].rules
      rules.forEach((obj) => {
        console.log(obj)
        if (obj.required && !obj.message) {
          obj.message = '请选择' + this.label
        }
      })
    }
  },
  watch: {
    selectData(val) {
      this.loadData(val)
    }
  },
  beforeDestroy() {
  },
  methods: {
    /**
     * 选择内容改变事件
     * @param value
     * @param data
     */
    change(value, option) {
      this.$nextTick(() => {
        this.$emit('change', value, option)
      })
    },
    /**
     * 加载数据
     * @param val
     */
    loadData(val) {
      if (val instanceof Array) {
        this.dataSoure = val
      } else {
        this.$getAction(val, {}).then(res => {
          this.dataSoure = res.data
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.hidden-content::before {
  margin: 0 8px 2px 2px;
  content: '';
}

::v-deep .ant-radio-wrapper:hover .ant-radio, ::v-deep .ant-radio:hover .ant-radio-inner, ::v-deep .ant-radio-input:focus + .ant-radio-inner {
  border-color: #1A67F8;
}

::v-deep input:disabled {
  opacity: 0;
}
</style>
